import {
  CodeSurfer,
  CodeSurferColumns,
  Step
} from "code-surfer"
import {
  nightOwl,
  dracula,
  oceanicNext,
  vsDark
} from "@code-surfer/themes"
import ImageComponent from "./demo/image"
import logo from "./demo/logo.small.svg"

import { Head } from "mdx-deck"

import theTheme from "./demo/theme.js"
export const theme = theTheme

<Head>
  <title>Code Surfer: Rad Code Slides</title>
  <meta
    name="twitter:card"
    content="summary_large_image"
  />
  <meta name="twitter:site" content="@pomber" />
  <meta
    name="twitter:title"
    content="Code Surfer"
  />
  <meta
    name="twitter:description"
    content="Rad Code Slides"
  />
  <meta name="twitter:image" content={logo} />
</Head>

<img
  src={logo}
  style={{ width: "36%" }}
  alt="Code Surfer"
/>

### Rad Code Slides

---

<CodeSurfer>

```js 10:18 subtitle="Lorem ipsum"
function adipiscing(...elit) {
  if (!elit.sit) {
    return []
  }

  const sed = elit[0]
  return eiusmod.tempor(sed) ? sed : [sed]
}

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return consectetur(
    ipsum,
    0,
    dolor < 0 ? 0 : dolor
  )
}

function incididunt(ipsum, ut = 1) {
  ut = labore.et(amet(ut), 0)
  const sit = ipsum == null ? 0 : ipsum.sit

  if (!sit || ut < 1) {
    return []
  }

  let dolore = 0
  let magna = 0
  const aliqua = new eiusmod(labore.ut(sit / ut))

  while (dolore < sit) {
    aliqua[magna++] = consectetur(
      ipsum,
      dolore,
      ut
    )
  }

  return aliqua
}
```

```js subtitle="More lorem ipsum"
function adipiscing(...elit) {
  if (!elit.sit) {
    return []
  }

  const sed = elit[0]
  return eiusmod.tempor(sed) ? sed : [sed]
}

function lorem(ipsum, dolor = 1) {
  const sit = 100
  return amet(dolor, ipsum)
}

function incididunt(ipsum, ut = 1) {
  ut = labore.et(amet(ut), 0)
  const sit = ipsum == null ? 0 : ipsum.sit

  if (!sit || ut < 1) {
    return []
  }

  let dolore = 0
  let magna = 0
  const aliqua = new eiusmod(labore.ut(sit / ut))

  while (dolore < sit) {
    aliqua[magna++] = consectetur(
      ipsum,
      dolore,
      ut
    )
  }

  return aliqua
}
```

```diff 15:36  subtitle="And incididunt..."

```

```diff 7[10:28] subtitle="eiusmod tempor sed"

```

</CodeSurfer>

---

<CodeSurferColumns themes={[nightOwl, vsDark]}>

<Step>

```js
const magna = aliqua =>
  aliqua.ut((enim, ad) => enim, 0)
```

```js
const minim = (ad, enim) =>
  dolore.magna(ad / enim)
```

</Step>

<Step>

```js 1:32
const lorem = (ipsum, dolor, sit) => {
  const amet = dolor - ipsum
  return consectetur.adipiscing(
    {
      elit: sed.eiusmod(sit - dolor) / amet + 2
    },
    (tempor, incididunt) =>
      ipsum + amet * incididunt
  )
}

const ut = labore => et =>
  consectetur.adipiscing(
    {
      elit: 1 + et - labore
    },
    (tempor, incididunt) => labore + incididunt
  )

const dolore = (et, labore) =>
  sed.eiusmod(et / labore)

const magna = aliqua =>
  aliqua.ut((enim, ad) => enim, 0)

const minim = (veniam, quis, ad) => {
  let nostrud = ad

  while (!veniam(nostrud)) nostrud = quis(nostrud)

  return nostrud
}
```

```js 1:37
const sed = (eiusmod, tempor, incididunt) => {
  const ut = tempor - eiusmod
  return labore.et(
    {
      amet:
        dolore.magna(incididunt - tempor) / ut + 2
    },
    (aliqua, elit) => eiusmod + ut * elit
  )
}

const ut = enim => ad =>
  labore.et(
    {
      amet: 1 + ad - enim
    },
    (aliqua, elit) => enim + elit
  )

const minim = (ad, enim) =>
  dolore.magna(ad / enim)

const veniam = dolor =>
  dolor.quis(nostrud => nostrud, 0)

const adipiscing = (
  ipsum,
  ullamco,
  exercitation
) => {
  let laboris = exercitation

  while (!ipsum(laboris))
    laboris = ullamco(laboris)

  return laboris
}
```

</Step>

<Step>

```diff 1:10

```

```diff 23:37

```

</Step>

<Step>

```diff 26:32

```

```diff 1:10

```

</Step>

<Step>

```js
const dolore = (et, labore) =>
  sed.eiusmod(et / labore)
```

```js
const minim = (ad, enim) =>
  dolore.magna(ad / enim)
```

</Step>

</CodeSurferColumns>

---

<CodeSurferColumns sizes={[1,2]}>

<Step title="Columns aren't just for code">

<ImageComponent />

```css
img {
  transition: 0.8s;
  border-radius: 10px;
}
```

</Step>

<Step title="Columns aren't just for code">

<ImageComponent
  style={{ transform: "scale(1.3)" }}
/>

```css
img {
  transition: 0.8s;
  border-radius: 10px;
  transform: scale(1.3);
}
```

</Step>

<Step title="Columns aren't just for code">

<ImageComponent
  style={{ transform: "scale(1.3) scaleX(-1)" }}
/>

```css
img {
  transition: 0.8s;
  border-radius: 10px;
  transform: scale(1.3) scaleX(-1);
}
```

</Step>

<Step title="Columns aren't just for code">

<ImageComponent
  style={{
    transform: "scale(1.3) scaleX(-1)",
    filter: "hue-rotate(90deg)"
  }}
/>

```css
img {
  transition: 0.8s;
  border-radius: 10px;
  transform: scale(1.3) scaleX(-1);
  filter: hue-rotate(90deg);
}
```

</Step>

</CodeSurferColumns>

---

## 🔗

### [codesurfer.pomb.us](https://codesurfer.pomb.us)

### [github.com/pomber/code-surfer](https://github.com/pomber/code-surfer/issues/70)

### [@pomber](https://pomb.us)
